<style lang="less">
@import "./login.less";
</style>

<template>
  <div id="login" class="login-bg">
    <div class="company-info">
      <img :src="`${publicPath}static/images/semi-logo.png`" width="130px" height="80px" >
      <h4 class="small-t" v-html="$t('DefaultWelcome')"/>
      <h3 class="big-t">{{ $t('SystemName') }}</h3>
    </div>
    <div class="login-wrap">
      <div class="login-table">
        <div class="login-content">
          <h3>{{ $t('userLogin') }}</h3>
          <div class="login-type" style="background: none">
            <el-radio-group
              v-model="loginType"
              @change="changeLoginType">
              <el-radio-button :label="1">{{ $t('account') }}</el-radio-button>
              <el-radio-button :label="2">LDAP</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="loginType === 2" class="login-input">
            <img src="../../public/static/images/login_ico_user.png" >
            <input
              v-model="username"
              :placeholder="$t('LdapRequired')"
              type="text"
              autocomplete="on"
              @keyup.13="handleLogin"
            >
          </div>
          <div v-if="loginType === 1" class="login-input">
            <img src="../../public/static/images/login_ico_user.png" >
            <input
              v-model="username"
              :placeholder="$t('userIDRequired')"
              type="text"
              autocomplete="on"
              @keyup.13="handleLogin"
            >
          </div>
          <div class="login-input">
            <img src="../../public/static/images/login_ico_password.png" >
            <input
              v-model="password"
              :placeholder="$t('passwordRequired')"
              type="password"
              autocomplete="on"
              @keyup.13="handleLogin"
            >
          </div>
          <div class="login-input">
            <img src="../../public/static/images/login_ico_language.png" >
            <el-select v-model="Language" @change="changeLang">
              <el-option :disabled="$i18n.locale=='zh-CN'" label="中   文" value="zh-CN"/>
              <el-option :disabled="$i18n.locale=='en-US'" label="English" value="en-US"/>
            </el-select>
          </div>
          <input
            id="LanguageType"
            type="text"
            name="LanguageType"
            style="display: none"
            value="Chinese"
          >
          <button
            type="primary"
            long
            class="btn-login"
            @click.prevent="handleLogin"
          >
            {{ $t("login") }}
          </button>
        </div>
      </div>
    </div>
    <div class="foot"/>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import Config from '@/settings'
export default {
  name: 'Login',
  data() {
    return {
      loginType: 1,
      codeUrl: '',
      cookiePass: '',
      username: '',
      password: '',
      loading: false,
      redirect: undefined,
      Language: localStorage.getItem('local') || navigator.language || 'zh-CN',
      ip: '',
      publicPath: process.env.BASE_URL
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    // token 过期提示
    this.point()
  },
  methods: {
    // 语言切换
    changeLang() {
      this.$confirm('确定切换语言吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.$i18n.locale === 'zh-CN') {
            this.$i18n.locale = 'en-US'
            localStorage.setItem('local', 'en-US')
            document.title = this.$i18n.t(this.$route.meta.title) + ' - ' + Config.title
          } else {
            this.$i18n.locale = 'zh-CN'
            localStorage.setItem('local', 'zh-CN')
            document.title = this.$i18n.t(this.$route.meta.title) + ' - ' + Config.title
          }
        })
        .catch(() => {
          this.Language = this.$i18n.locale
        })
    },
    handleLogin() {
      if (this.username === '') {
        this.$notify({
          title: this.$t('tip'),
          message: this.$t('userIDRequired'),
          type: 'error',
          duration: 5000
        })
        return
      }
      if (this.password === '') {
        this.$notify({
          title: this.$t('tip'),
          message: this.$t('passwordRequired'),
          type: 'error',
          duration: 5000
        })
        return
      }
      const user = {
        username: this.username,
        password: this.password,
        loginType: this.loginType
        // ipaddress: this.ip
      }
      this.loading = true
      this.$store.dispatch('Login', user).then(res => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch((error) => {
        this.loading = false
        this.$notify({
          title: this.$t('tip'),
          message: this.$t(error),
          type: 'error',
          duration: 5000
        })
      })
    },
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: this.$t('tip'),
          message: this.$t('loginExpire'),
          type: 'warning',
          duration: 5000
        })
        Cookies.remove('point')
      }
    },
    changeLoginType() {
      this.username = ''
    }
  }
}
</script>
